<template>
  <div class="home">
    <a-carousel :after-change="onChange"  style="z-index:0;">
    <div class="img_wrapper img1">
      <div class="img_title">大乐之野·绿山墙</div>
      <div class="img_title2">群山之中，是心灵的故乡</div>
    </div>
    <div class="img_wrapper img2">
      <div class="img_title">东驿敦煌酒店</div>
      <div class="img_title2">一座适于隐逸的“沙海幽岛”，一个享受纯粹的逸世之所</div>
    </div>
    <div class="img_wrapper img3">
      <div class="img_title">鼓浪屿</div>
      <div class="img_title2">碧水蓝天，放松心情</div>
    </div>
    <div class="img_wrapper img4">
      <div class="img_title">放开心扉，畅游之旅</div>
      <div class="img_title2"></div>
    </div>
  </a-carousel>
  <div class="rzrq">
    <a-input placeholder="请输入入住地点" style="width:200px;"></a-input>
    <a-date-picker placeholder="请选择入住日期"/>
    <a-date-picker placeholder="请选择退房日期"/>
    <a-input placeholder="请输入入住人数" style="width:200px;"></a-input>
    <a-button type="primary">搜索</a-button>
  </div>
  <div class="title2">
    住宿推荐，为您提供优质的住宿服务
  </div>
  <div class="div3">
    <div class="div3_item">
      <div class="div_img"><a-icon type="deployment-unit" /></div>
      <div class="div_wz">
        <div class="div_title">个性化</div>
      <div class="div_script">更大、更私密空间， 能够满足您不同场景下的个性化需求</div>
      </div>
    </div>
    <div class="div3_item">
      <div class="div_img"><a-icon type="gold" /></div>
      <div class="div_wz">
        <div class="div_title">尊贵</div>
      <div class="div_script">7*24管家服务：司机、厨师、管家、保安，一应俱全。尊享奢华住宿体验</div>
      </div>
    </div>
    <div class="div3_item">
      <div class="div_img"><a-icon type="insurance" /></div>
      <div class="div_wz">
        <div class="div_title">超值</div>
      <div class="div_script">人均价格及附加服务使得别墅比高端酒店性价比更高</div>
      </div>
    </div>
    <div class="div3_item">
      <div class="div_img"><a-icon type="like" /></div>
      <div class="div_wz">
        <div class="div_title">品质</div>
      <div class="div_script">专人定期现场检查，保证无与伦比的住宿品质</div>
      </div>
    </div>
  </div>
   <div class="title2">
    精彩点评
  </div>
  <div class="comment">
    <div class="comment_left">
      <comment :likes=13 :comment_content="comment_content"></comment>
    </div>
    <div class="comment_right">
      <span style="font-size:15px;">回复</span>
      <comment1 :likes="3"></comment1>
      <comment1 :likes="2"></comment1>
    </div>
  </div>
  <div class="title2">
    历史订单分析
  </div>
  <div class="jdtj">
    <div class="jdtj_item">
      <div class="echart1">
        <echart1></echart1>
      </div>
      <div class="echart_title">个人因素分析</div>
    </div>
    <div class="jdtj_item">
      <div class="echart1">
        <echart2></echart2>
      </div>
      <div class="echart_title">外部因素分析</div>
    </div>
  </div>
  <div class="tuijian">
    基于以上分析，我们为您做了以下推荐：
  </div>
  <div class="tuijian_result">
    <div class="jiudian_item" v-for="(item,index) in jiudian" :key="index">
      <div class="jiudian_img"></div>
      <div class="jiudian_info">
        <div class="jiudian_title">{{item.jiudian_name}}</div>
        <div class="jiudian_script">{{item.jiudian_script}}</div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import comment from "@/components/comment"
import comment1 from "@/components/comment1"
import echart1 from "@/components/echart1"
import echart2 from "@/components/echart2"
export default {
  components: {
    comment,
    comment1,
    echart1,
    echart2,
  },
  props: {},
  data() {
    return {
      jiudian:[
        {jiudian_name:"酒店1",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        {jiudian_name:"酒店2",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        {jiudian_name:"酒店3",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        {jiudian_name:"酒店4",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        {jiudian_name:"酒店5",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        {jiudian_name:"酒店6",jiudian_script:"酒店装修时尚高雅，设施齐全，环境舒适。拥有跃层商务客房，酒店还配有豪华餐饮包厢、中西自助餐厅、会议厅、商务中心、精品屋、美容美发和足浴中心等，服务配套与娱乐设施一应俱全。酒店以“宾客至上，服务第一”为经营宗旨，采用了科学的经营机制和管理方法，不断追求卓越，得到了社会的认可，更被省有关部门确定**接待酒店。无论商务、宴会、休闲、娱乐，都是您的理想之选。"},
        
      ],
      comment_content:"第三次到长白山滑雪，只住凯悦，房间大好加床，酒店独立雪屋穿好装备出门就是雪场索道，侧门出去就是小镇各种吃饭的和超市。晚上有很不错户外池泡汤，不用跟别的酒店的住客去挤那个汉拿山温泉。"
    };
  },
  watch: {},
  computed: {},
  methods: {
    onChange(a, b, c) {
      console.log(a, b, c);
    },
  },
  created() {},
  mounted() {}
};
</script>
<style scoped lang="less">
.tuijian_result{
  display:flex;
  flex-wrap: wrap;
  padding:10px 5%;
  .jiudian_item{
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    width:23%;
    height:200px;
    margin:1%;
    display:flex;
    align-items: center;
    justify-content:space-between;
    .jiudian_img{
      width:100px;
      height:100px;
      margin:10px;
      background-image: url(~@/assets/imgs/jiudian.webp);
      background-size: cover;
    }
    .jiudian_info{
      width:60%;
      height:100%;
      .jiudian_title{
        font-size: 16px;
        text-align: center;
        line-height: 40px;
      }
      .jiudian_script{
        font-size: 14px;
        color:rgba(0,0,0,.8);
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:5;
        margin-right: 20px;
      }
    }
  }
}
.tuijian {
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.jdtj{
  padding:10px 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height:500px;
  .jdtj_item{
    width:600px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    .echart1{
      height:400px;
    }
    .echart_title{
      font-size: 16px;
      color:rgba(0,0,0,.6)
    }
  }
}
.comment{
  padding:20px 10%;
  display: flex;
  justify-content:space-between;
  .comment_left{
  height:350px;
  width:50%;
}
.comment_right{
  width:30%;
  height:300px;
}
}
.ant-carousel ::v-deep .slick-slide {
  text-align: center;
  height: 38vw;
  line-height: 38vw;
  overflow: hidden;
}
.div3{
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding:20px 5%;
  .div3_item{
    width: 20%;
    height:120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .div_img{
      width:80px;
      height:80px;
      font-size: 50px;
      line-height: 80px;
      text-align: center;
    }
    .div_wz{
      height:120px;
      width:80%;
      .div_title{
        font-size: 28px;
        text-align: center;
      }
      .div_script{
        font-size: 16px;
      }
    }
  }
}
.ant-carousel ::v-deep .slick-slide h3 {
  color: #fff;
}
.img_wrapper{
  background-size: 100% 100%;
  width: 100%;
  height: 38vw;
  position: relative;
}
.img1{
  background-image: url(~@/assets/imgs/img1.jpg);
}
.img2{
  background-image: url(~@/assets/imgs/img2.jpg);
}
.img3{
  background-image: url(~@/assets/imgs/img3.png);
}
.img4{
  background-image: url(~@/assets/imgs/img4.png);
}
.rzrq{
  display:flex;
  height:60px;
  align-items: center;
  justify-content: space-around;
  padding:0 20%;
  position:relative;
  top:-80px;
  background-color: rgba(0,0,0,.4);
}
.img_title{
  font-size: 35px;
  font-weight: bold;
  color:#fff;
  position:absolute;
  top:100px;
  left:30%;
}
.img_title2{
  font-size: 30px;
  font-weight: bold;
  color:#fff;
  position:absolute;
  top:150px;
  left:30%;
}
.title2{
  text-align: center;
  font-size: 30px;
}
</style>